<template>
  <div>
    <el-dialog title="查询结果" :visible.sync="isShow" width="1000px">
      <el-table
        :data="
          queryEventsData1.slice(
            (currentPage - 1) * PageSize,
            currentPage * PageSize
          )
        "
        border
      >
        <!-- 事件编号 -->
        <el-table-column
          prop="AttValue[0]"
          label="事件编号"
          width="150px"
        ></el-table-column>
        <!-- 事件类型 -->
        <el-table-column prop="AttValue[1]" label="事件类型"></el-table-column>
        <!-- 事件等级 -->
        <el-table-column prop="AttValue[2]" label="事件等级"></el-table-column>
        <!-- 发生时间 -->
        <el-table-column
          prop="AttValue[3]"
          label="发生时间"
          width="150px"
        ></el-table-column>
        <!-- 发生地点 -->
        <el-table-column prop="AttValue[4]" label="发生地点"></el-table-column>
        <el-table-column prop="AttValue[5]" label="车牌号"></el-table-column>
        <!-- 车牌号 -->
        <el-table-column prop="AttValue[6]" label="驾驶员"></el-table-column>
        <!-- 处理状态 -->
        <el-table-column label="处理状态">
          <template slot-scope="scope">
            <div>{{ scope.row.AttValue[7] | handleState }}</div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="" label="操作">
          <template v-slot="queryEventsData1">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteEvents(queryEventsData1.row.FID)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryEventsData1.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible3: true,
      queryEventsData2: [],
      // 分页器相关
      currentPage: 1,
      pageSizes: [5, 10, 15, 20],
      PageSize: 5,
    }
  },
  // 接收父组件信息
  props: {
    dialogFormVisible4: '',
    queryEventsData1: '',
  },
  filters: {
    handleState(value) {
      if (value == 0) {
        return '未处理'
      } else {
        return '已处理'
      }
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogFormVisible4
      },
      set(val) {
        /* console.log(val); */
        this.$emit('send')
      },
    },
  },
  methods: {
    // 改变弹窗状态
    changeVisible3() {
      this.$emit('send')
    },
    // 删除
    deleteEvents(FID) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          console.log(FID)
          const deleteService = new Zondy.Service.EditDocFeature('guanggu', 3, {
            ip: 'localhost',
            port: 6163,
          })
          deleteService.deletes(FID, window.location.reload())
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      // 每页显示数量
      this.PageSize = val
      console.log(total)
    },
  },
}
</script>

<style></style>
